<div fxLayout="row" fxLayoutAlign="center center">
  <mat-card fxFlex>
    <mat-card-title>Base Tabs</mat-card-title>
    <mat-card-content>
      <mat-tab-group>
        <mat-tab label="第一">
          <h4>神器！解放你的双手——UI设计稿全自动切图和标注的一些工具推荐</h4>
          <p>这里切图推荐一个插件：Cutterman，是个国产的切图工具，广告语就叫“最好用的切图工具</p>
        </mat-tab>
        <mat-tab label="第二">
          <h4>Echo.js – 简单易用的图片延迟加载插件</h4>
          <p>Echo.js 是一个独立的延迟加载图片的 JavaScript 插件。Echo.js 不依赖第三方库，压缩后不到1KB大小。 延迟加载是提高网页首屏显示速度的一种很有效的方法，当图片元素进入窗口可视区域的时候，它就会改变图像的 src 属性，从服务端加载所需的图片，这也是一个异步的过程。</p>
        </mat-tab>
        <mat-tab label="第三">
          <h4>Lazyr.js – 延迟加载图片</h4>
          <p>Lazyr.js 是一个小的、快速的、现代的、相互间无依赖的图片延迟加载库。通过延迟加载图片，让图片出现在（或接近)）视窗才加载来提高页面打开速度。这个库通过保持最少选项并最大化速度。</p>
        </mat-tab>
      </mat-tab-group>
    </mat-card-content>
  </mat-card>

</div>

<div fxLayout="row" fxLayoutAlign="center center">

  <mat-card fxFlex>
    <mat-card-title>步骤条</mat-card-title>
    <mat-card-content>
      <mat-tab-group [selectedIndex]="selectedIndex">
        <mat-tab label="第一">
          <h4>神器！解放你的双手——UI设计稿全自动切图和标注的一些工具推荐</h4>
          <p>这里切图推荐一个插件：Cutterman，是个国产的切图工具，广告语就叫“最好用的切图工具</p>
          <button mat-button (click)="onNextStepTriggered()">下一步</button>
        </mat-tab>
        <mat-tab label="第二" [disabled]="step1">
          <h4>Echo.js – 简单易用的图片延迟加载插件</h4>
          <p>Echo.js 是一个独立的延迟加载图片的 JavaScript 插件。Echo.js 不依赖第三方库，压缩后不到1KB大小。 延迟加载是提高网页首屏显示速度的一种很有效的方法，当图片元素进入窗口可视区域的时候，它就会改变图像的 src 属性，从服务端加载所需的图片，这也是一个异步的过程。</p>
          <button mat-button>下一步</button>
        </mat-tab>
        <mat-tab label="第三" [disabled]="step2">
          <h4>Lazyr.js – 延迟加载图片</h4>
          <p>Lazyr.js 是一个小的、快速的、现代的、相互间无依赖的图片延迟加载库。通过延迟加载图片，让图片出现在（或接近)）视窗才加载来提高页面打开速度。这个库通过保持最少选项并最大化速度。</p>
          <button mat-button>下一步</button>
        </mat-tab>
      </mat-tab-group>
    </mat-card-content>
  </mat-card>
</div>
